<template>
  <div>
      <div>
            <a-carousel arrows>
                <div
                slot="prevArrow"
                slot-scope="props"
                class="custom-slick-arrow"
                style="left: 10px;zIndex: 1"
                >
                    <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                </div>
                <ul style="margin:0;padding:0;list-style: none;" v-for="val in imgList">
                  <li>
                    <img style="width:100%;height:360px;" :src="val.imagePath" alt="">
                  </li>
                </ul>
            </a-carousel>
      </div>
      <div>
        <span>选择展会：</span>
        <a-select defaultValue="" v-model="exhibiId" @change="changeSpecification" style="width: 20%;margin-top:20px;">
          <a-select-option key="" value="">请选择</a-select-option> 
          <a-select-option v-for="(val,index) in listDataCopy" :key="val.id" :value="val.id">{{val.theme}}</a-select-option>
        </a-select>
        <a-button type="primary" @click="listInt" style="margin-left:15px;">
          重置
        </a-button>
      </div>
      <ul style="margin:0;padding:0;list-style:none;margin-top:25px;">
          <li class="borderSty" v-for="(item,index) in listData" :style="(index%2 == 0)?'margin-right:4%;':''">
              <img :src="item.poster1.split(',')[0]" style="width:165px;height:210px;" alt="">
              <div style="text-align:left;width:100%;padding-left:20px;">
                  <div style="font-size:16px;color:#000;font-weight:bold;">{{item.theme}}</div>
                  <div style="font-size:12px;color:#888;margin:20px 0;">{{item.brief}}</div>
                  <div style="font-size:14px;font-weight:bold;">
                      <img style="width:27px;" src="../../assets/exhibit-icon-time.svg" alt="">
                      <span>{{item.startTime}}</span> —— <span>{{item.endTime}}</span>
                  </div>
                  <div style="font-size:14px;font-weight:bold;">
                      <img style="width:27px;" src="../../assets/exhibit-icon-position.svg" alt="">
                      <span>{{item.address}}</span>
                  </div>
                  <div style="margin-top:20px;">
                      <span style="font-size:14px;color:#1A8BFD;cursor:pointer;" @click="detailExh(index)">了解详情>></span>
                      <span style="background:#FF5252;padding:8px 25px;font-size:16px;color:#fff;float:right;cursor:pointer;" @click="productNum(item)">
                          申请参展
                          <img style="margin-top: -2px;" src="../../assets/common-icon-moreWhite.svg" alt="">
                      </span>
                  </div>
              </div>
          </li>
      </ul>
    <div style="clear: both;float: right;" v-if="listData.length>0">
        <a-pagination show-quick-jumper :default-current="current" :total="total" @change="onChange" />
    </div>
    <div v-else style="text-align: center;padding-top:100px;font-size: 16px;font-weight: bold;">
      暂无最新展会
    </div>
    <a-modal v-model="visible" title="申请参展" :destroyOnClose="true" ok-text="确认" cancel-text="取消" @ok="hideModal">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
            <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="在售剧本">
            <a-checkbox-group @change="onChangeOld" v-decorator="['worksIds', {}]" >
                <a-checkbox v-for="(item, key) in specification" :value="key">{{ item.productName }}</a-checkbox>
            </a-checkbox-group>
            <div style="border:1px solid #FF5252;border-radius: 13px;padding: 2px 5px;font-size: 12px;cursor: pointer;width: 83px;height: 26px;line-height: 21px;" @click="jumpPro(1)">
              <img style="margin-top:-4px;" src="../../assets/product-icon-add.svg" alt="">
              添加商品
            </div>
            </a-form-item>
            <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="预售剧本">
            <a-checkbox-group @change="onChangeNew" v-decorator="['newWorksIds', {}]">
                <a-checkbox v-for="(item, key) in specificationNew" :value="key">{{ item.productName }}</a-checkbox>
            </a-checkbox-group>
            <div style="border:1px solid #FF5252;border-radius: 13px;padding: 2px 5px;font-size: 12px;cursor: pointer;width: 83px;height: 26px;line-height: 21px;" @click="jumpPro(2)">
              <img style="margin-top:-4px;" src="../../assets/product-icon-add.svg" alt="">
              添加商品
            </div>
            </a-form-item>
            <a-form-item 
            v-if="locationType == 1"
            class="checkbxGroup"
            style="overflow:hidden;"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="选择展位">
            <a-col style="width:575px;white-space:nowrap;" v-for="(val,index) in enList.ens"  v-decorator="['boothNum', {}]">
                <a-checkbox v-for="(item, key) in numList" :disabled="boothNums.indexOf(val+item)!=-1" @change="seatChange(val+item)" :value="val+item">{{ val+item }}</a-checkbox>
            </a-col>
            </a-form-item>
            <a-form-item 
            v-if="locationType == 0"
            class="checkbxGroup"
            style="overflow:scroll;"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="选择酒店房间">
            <a-col name="checkboxgroup" style="width:575px;white-space:nowrap;" v-for="(val,index) in enList.ens" v-decorator="['boothNum', {}]">
                <a-checkbox v-for="(item, key) in val" :disabled="boothNums.indexOf(';'+item+';')!=-1 || boothNums.indexOf(item+';')==0" @change="seatChange(item)" :value="item">{{ item }}</a-checkbox>
            </a-col>
            </a-form-item>
        </a-form>
        </a-spin>
    </a-modal>
    <a-modal v-model="visibleDetail" title="详情" ok-text="确认" @ok="visibleDetail = false">
      <p>展会主题：{{columList.theme}}</p>
      <p>举办地址：{{columList.address}}</p>
      <p>展会简介：{{columList.brief}}</p>
      <p>展位数：{{columList.boothNum}}</p>
      <p>主票数：{{columList.mainTicketNumber}}</p>
      <p>次票数：{{columList.attchedTicketNumber}}</p>
      <p>场地类型：<span v-if="columList.locationType == 0">酒店</span><span v-if="columList.locationType == 1">大厅</span></p>
      <p v-if="columList.locationType == 0">酒店层数：{{columList.floorNumber}}</p>
      <p v-if="columList.locationType == 0">酒店房间号：{{columList.hotelNumber}}</p>
      <p v-if="columList.locationType == 1">场地编排列：{{columList.columnNumber}}</p>
      <p v-if="columList.locationType == 1">场地编排行：{{columList.lineNumber}}</p>
      <p>展会管理员：{{columList.meetingAdminPhone}}</p>
      <p>发行方审核：<span v-if="columList.isAudit == 0">否</span><span v-if="columList.isAudit == 1">是</span></p>      
      <p>开始时间：{{columList.startTime}}</p>
      <p>结束时间：{{columList.endTime}}</p>
      <p>备注：{{columList.remark}}</p>
      <p>海报：
        <ul style="list-style: none;width:100%;" v-if="columList.poster1 && columList.poster1.indexOf(',')!=-1">
          <li v-for="val in columList.poster1.split(',')" style="width:150px;display: inline-block;">
            <img style="width:150px;" :src="val" alt="">
          </li>
        </ul>
        <img v-else style="width:150px;" :src="columList.poster1" alt="">
      </p>
      <p>场地使用许可：
        <img v-if="columList.licenseFile" style="width:150px;" :src="columList.licenseFile" alt="">
        <span v-else>暂无图片</span>
      </p>
    </a-modal>
  </div>
</template>

<script>
    import { httpAction,postAction,getAction } from '@/api/manage'

  export default {
    name: "Exhibition_Home",
    components: {
      
    },
    data () {
        return {
            exhibiId:"",
            listData:[],
            total:0,
            current:1,
            visible:false,
            specification:[],
            specificationNew:[],
            confirmLoading: false,
            form: this.$form.createForm(this),
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            enList:{},
            numList:[],
            boothNums:"",
            listNameOld:"",
            listNameNew:"",
            listIdOld:"",
            listIdNew:"",
            visibleDetail:false,
            columList:{},
            locationType:0,
            url: {
              add: "/exhibition/exhibition_issuer_register/add",
              edit: "/exhibition/exhibition_issuer_register/edit",
            },
            listDataCopy:[],
            imgList:[],
            seatNum:""
        }
    },
    mounted(){
        this.listInt();
        var param={
          productStandardsId: "1216548480059949057",
          order: "asc",
          field: "",
          pageNo: 1,
          pageSize: 1000
        };
        getAction("/exhibition/exhibition_product_standards_new/list",param).then((res) => {
          if (res.success) {
            var list = res.result.records;
            // this.specificationNew = res.result.records;
            for(let i=0;i<list.length;i++){
              if(list[i].newOldStatus == 0){
                this.specification.push(list[i]);
              }
              if(list[i].newOldStatus == 1){
                this.specificationNew.push(list[i]);
              }
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
        })
    },
    methods: {
      seatChange(val){
        if(this.seatNum.indexOf(val) == -1){
          this.seatNum+=val+";";
        }else{
          this.seatNum = this.seatNum.replace(val+";","");
        }
      },
      listInt(){
        httpAction("exhibition/exhibition_sponsor_banner/list",{},"get").then((res)=>{
          if (res.success) {
            this.imgList = res.result.records;
          }
        })
        this.exhibiId = "";
        var list= {
            column: 'createTime',
            order: 'desc',
            field: 'id,,,theme,address,boothNum,ticketsNum,columnNumber,lineNumber,startTime,endTime,ticketsNum,poster1,licenseFile,remark,action',
            pageNo: 1,
            pageSize: 10
        }
        getAction("/exhibition/exhibition_meeting_info/listCurrent",list)
            .then(res => {
                if (res.success) {
                    this.listData = res.result.records;
                    this.listDataCopy=JSON.parse(JSON.stringify(this.listData));
                    this.current = res.result.current;
                    this.total = res.result.total;
                }
            })
      },
      changeSpecification(value){
        var list= {
            id:value,
            column: 'createTime',
            order: 'desc',
            field: 'id,,,theme,address,boothNum,ticketsNum,columnNumber,lineNumber,startTime,endTime,ticketsNum,poster1,licenseFile,remark,action',
            pageNo: 1,
            pageSize: 10
        }
        getAction("/exhibition/exhibition_meeting_info/listCurrent",list)
            .then(res => {
                if (res.success) {
                    this.listData = res.result.records;
                    this.current = res.result.current;
                    this.total = res.result.total;
                }
            })
      },
      jumpPro(num){
        if(num == 1){
          this.$router.push('/block/BlockProductInfoList');
        }
        if(num == 2){
          this.$router.push('/dashboard/ProductVverview');
        }
      },
        detailExh(index){
            this.visibleDetail = true;
            this.columList = this.listData[index];
        },
        hideModal() {
            const that = this;
            // 触发表单验证
            this.form.validateFields((err, values) => {
            if (!err) {
                that.confirmLoading = true;
                let httpurl = '';
                let method = '';
                // if(!that.model.id){
                // httpurl+=that.url.add;
                // method = 'post';
                // }else{
                // httpurl+=that.url.edit;
                // method = 'put';
                // }
                httpurl+=that.url.add;
                method = 'post';
                values.worksIds = this.listIdOld;
                values.exhibitionMeetingId = this.ethId;
                values.newWorksIds = this.listIdNew;
                values.worksIdsName = this.listNameOld;
                values.newWorksIdsName = this.listNameNew;
                if(!this.listIdOld && !this.listIdNew){
                  that.$message.warning("请先选择剧本！");
                  that.confirmLoading = false;
                  that.visible = false;
                  return
                }
                if(!that.seatNum){
                  that.$message.warning("请先展位！");
                  that.confirmLoading = false;
                  that.visible = false;
                  return
                }
                // var strVal = "";
                // for(var i=0;i<values.boothNum.length;i++){
                // strVal+=values.boothNum[i]+";";
                // }
                values.boothNum = that.seatNum;
                let formData = Object.assign({}, values);
                //时间格式化
                httpAction(httpurl,formData,method).then((res)=>{
                    if(res.success){
                        that.$message.success(res.message);
                    }else{
                        that.$message.warning(res.message);
                    }
                    that.confirmLoading = false;
                    that.visible = false;
                })
            }
            })
        },
        onChange(pageNumber){
            var list= {
                column: 'createTime',
                order: 'desc',
                field: 'id,,,theme,address,boothNum,ticketsNum,columnNumber,lineNumber,startTime,endTime,ticketsNum,poster1,licenseFile,remark,action',
                pageNo: pageNumber,
                pageSize: 10
            }
            getAction("/exhibition/exhibition_meeting_info/listCurrent",list)
                .then(res => {
                    if (res.success) {
                        this.listData = res.result.records;
                        this.current = res.result.current;
                        this.total = res.result.total;
                    }
                })
        },
        onChangeNew(value){
            this.listNameNew = ""
            this.listIdNew = ""
            for(let i=0;i<value.length;i++){
            if(i == 0){
                this.listNameNew += this.specificationNew[value[i]].productName;
                this.listIdNew += this.specificationNew[value[i]].id;
            }else{
                this.listNameNew +="," + this.specificationNew[value[i]].productName;
                this.listIdNew += "," + this.specificationNew[value[i]].id;
            }
            }
        },
        onChangeOld(value){
            this.listNameOld = ""
            this.listIdOld = ""
            for(let i=0;i<value.length;i++){
            if(i == 0){
                this.listNameOld += this.specification[value[i]].productName;
                this.listIdOld += this.specification[value[i]].id;
            }else{            
                this.listNameOld +="," +  this.specification[value[i]].productName;
                this.listIdOld +="," +  this.specification[value[i]].id;
            }
            }
        },
        productNum(data){
            this.visible = true;
            this.ethId = data.id;
            this.locationType = data.locationType;
            postAction("/exhibition/exhibition_issuer_register/getBoothNumByMeetingId",{exhibitionMeetingId:data.id}).then((res) => {
              if (res.success) {
                if(res.result.boothNums){
                  this.boothNums = res.result.boothNums;
                }
                if(data.locationType == 0){
                  var hotelNumber = data.hotelNumber.split(',');
                  var floorNumber = Math.ceil((hotelNumber.length)/5);
                  var yuNum = (hotelNumber.length)%5;
                  this.enList.ens = [];
                  for (let i=0;i<floorNumber; i++){
                    var str = [];
                    if(floorNumber == i+1 && yuNum!=0){
                      for(let j=0;j<yuNum;j++){
                        str.push(hotelNumber[(5*i)+j]);
                      }
                    }else{
                      for(let j=0;j<5;j++){
                        str.push(hotelNumber[(5*i)+j]);
                      }
                    }
                    this.enList.ens.push(str);
                  }
                }else{              
                  var column = data.columnNumber;
                  var line = data.lineNumber;
                  this.numList = [];
                  this.enList.ens = [];
                  this.enList.nums = [];
                  for (var i=0 ;i<column ; i++){
                      this.enList.ens.push(String.fromCharCode(i+65)); 
                      this.enList.nums.push(i+1);
                  }
                  for (var j=0 ;j<line ; j++){
                      this.numList.push(j+1); 
                  }
                }
                this.$forceUpdate();
              }else{
                  this.$message.warning(res.message)
              }
            })
        },
    }
  }
</script>
<style scoped>
  .ant-checkbox-wrapper + .ant-checkbox-wrapper{
    margin:0;
  }
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 360px;
  line-height: 360px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.borderSty{
    width:48%;
    height:260px;
    background: #fff;
    padding:20px;
    display: flex;
    justify-content:space-between;
    float:left;
    margin-bottom: 15px;
}
</style>